<%@ page import="com.test.BRBInference.BRBInference" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/6/10
  Time: 15:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>DataShow</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/exporting.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <br/>
            <p style="font-size: 20px;font-weight: bold; text-align: center">导入数据预览</p>
            <br/>
        </div>
    </div>
    <div class="row">

        <div class="col-md-5" >
            <div style="height: 800px" id="chart">
            </div>
        </div>

        <div class="col-md-6 col-md-offset-1">
            <table>
                <tr>
                    <th>
                        NO.<br/><br/>
                    </th>
                    <th>
                        X1<br/><br/>
                    </th>
                    <th>
                        X2<br/><br/>
                    </th>
                    <th>
                        X3<br/><br/>
                    </th>
                    <th>
                        X4<br/><br/>
                    </th>
                    <th>
                        X5<br/><br/>
                    </th>
                    <th>
                        X6<br/><br/>
                    </th>
                    <th>
                        X7<br/><br/>
                    </th>
                    <th>
                        X8<br/><br/>
                    </th>
                    <th>
                        X9<br/><br/>
                    </th>
                    <th>
                        X10<br/><br/>
                    </th>
                    <th>
                        X11<br/><br/>
                    </th>
                    <th>
                        X12<br/><br/>
                    </th>
                    <th>
                        X13<br/><br/>
                    </th>
                    <th>
                        X14<br/><br/>
                    </th>
                    <th>
                        X15<br/><br/>
                    </th>
                    <th>
                        X16<br/><br/>
                    </th>
                    <th>
                        Y<br/><br/>
                    </th>
                </tr>

                <c:forEach items="${sessionScope.dataList2}" var="item">
                    <tr class="data">
                        <c:forEach items="${item}" var="value">
                            <td id=${value}>
                                <br/>
                                    ${value}&nbsp;&nbsp;&nbsp;
                                <br/>
                            </td>
                        </c:forEach>
                    </tr>
                </c:forEach>
            </table>

        </div>

    </div>

    <p class="greenF" align="center" style="font-size: 20px;font-weight: bold">
        数据已导入系统<br/>
        请返回步骤2继续操作
    </p> <br/>
    <div class="btn-group" role="group" aria-label="..." style="margin-left: 47%">
        <a type="button" class="btn btn-primary" href="Step2.jsp"> 返回步骤2 </a>
    </div>
    <br/>
    <br/>

</div>
<%
    session.setAttribute("DataUpload", "finished");
%>

</body>
<style>
    .greenF {
        font-size: 20px;
        color: chartreuse;
    }

    .No {
        font-size: 17px;
        font-weight: bold;
    }

    td, th {
        text-align: center;
    }


</style>

<script type="text/javascript">

   var lb = [5,0,10,5,10,20,1204,5026,0.5,0.5,1.5,0,-1,0,65,65];
   var ub = [30,5,22,45,30,70,3893,15993,3.5,3.5,10,5,3.49,150,95,95];

    $(function () {
        //alert(${sessionScope.dataList2});

        $(".data").click(function () {
            //alert(this);//parseInt(this.id);
            var s = $(this).children(["td"]);

            var value = [16];
            var value2 = [16];

            for (var i = 0; i < 16; i++) {
                value[i] = (parseFloat(s[i + 1].id) - lb[i])/(ub[i] - lb[i]);
                value2[i] = 1 - value[i];
            }



                var option = {
                    chart: {
                        type: 'bar'
                    },
                    title:{
                        text:"数据分析图"
                    },
                    xAxis: {
                            categories:["X1", "X2", "X3", "X4", "X5", "X6", "X7", "X8", "X9", "X10", "X11", "X12", "X13", "X14", "X15", "X16"]
                    },
                    yAxis: {
                        min:0,
                        max:1,
                        reversedStacks: true
                    },
                    legend: {
                        reversed: true
                    },
                    plotOptions: {
                        series: {
                            stacking: 'normal'
                        }
                    },
                    series: [{
                        name: "",
                        color:"grey",
                        data: value2
                    },{
                        name: "数据特征占比",
                        color:"#24CBE5",
                        data:value
                    }]
                }

                $("#chart").highcharts(option);

        });

    })

</script>


</html>



